<template>
  <div>
    <el-card>
      <!-- 表单 -->
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-form :inline="true" :model="dirForm" class="demo-form-inline">
            <el-form-item label="目录名称">
              <el-input v-model="dirForm.tagName" size="mini" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="dirForm.state" placeholder="请选择" size="mini">
                <el-option label="启用" :value="1" size="mini" />
                <el-option label="禁用" :value="0" size="mini" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" @click="btnQingchu">清楚</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="btnSousuo">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-link
              v-if="subjectID"
              icon="el-icon-back"
              :underline="false"
              type="primary"
              style="margin-right: 20px"
              @click="btnGosub"
            >返回学科</el-link>
            <el-button type="success" icon="el-icon-edit" @click="btnAdd">新增目录</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 提示 -->
      <el-alert
        :title="`数据一共${page.total}条`"
        type="info"
        show-icon
        :closable="false"
      />
      <!-- 表格 -->
      <el-table
        :data="tagsList"
        style="width: 100%"
      >
        <el-table-column
          fixed
          type="index"
          label="序号"
        />
        <el-table-column
          prop="subjectName"
          label="所属学科"
        />
        <el-table-column
          prop="tagName"
          label="标签名称"
        />
        <el-table-column
          prop="username"
          label="创建者"
        />
        <el-table-column
          label="创建日期"
        >
          <template slot-scope="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <!-- 向状态把绑定formatter事件 -->
        <el-table-column
          prop="state"
          label="状态"
          :formatter="state"
        />
        <el-table-column
          label="操作"
        >
          <template slot-scope="{ row }">
            <el-row type="flex" justify="space-between">
              <el-col>
                <el-link size="small" type="primary" @click="btnStateChange(row)">{{ btnNameShow(row) }}</el-link>
              </el-col>
              <el-col>
                <!-- disabled为true不可用 当状态值为1时证明处于启用状态 这时修改删除无法点击-->
                <el-link v-show="row.state===0" size="small" type="primary" @click="btnEdit(row)">修改</el-link>
                <el-link v-show="row.state===1" size="small" type="info" :disabled="row.state===1">修改</el-link>
              </el-col>
              <el-col>
                <!-- disabled为true不可用 当状态值为1时证明处于启用状态 这时修改删除无法点击-->
                <el-link v-show="row.state===0" size="small" type="primary" @click="btnDel(row)">删除</el-link>
                <el-link v-show="row.state===1" size="small" type="info" :disabled="row.state===1">删除</el-link>
              </el-col>
            </el-row>

          </template>
        </el-table-column>
      </el-table>
      <!--
    分页 size-change pageSize 改变时会触发 每页条数
    current-change currentPage 改变时会触发 当前页
    current-page 当前页
    page-sizes 设置每页显示多少条
    :page-size="100" 每页显示多少个
    -->
      <el-row type="flex" justify="end">
        <el-pagination
          :current-page="page.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.pagesize"
          layout="prev ,pager , next, sizes, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>

    </el-card>
    <tagsDailog
      ref="tagsAdd"
      :tags-dailog-show.sync="tagsDailogShow"
      @editTags="getLabelList"
    />
  </div>

</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/tags.js'
import baseApi from '@/api/base/baseApi.js'
import tagsDailog from '../components/tags-add.vue'
export default {
  components: {
    tagsDailog
  },
  data () {
    return { // 搜索表单
      dirForm: {
        tagName: '',
        state: null// 状态 不能是字符串 否则会混乱
      },
      tagsList: [], // 表格列表用于承接请求回来的数据
      page: {
        // 分页配置项
        page: 1, // 当前页
        pagesize: 10, // 每页显示多少条
        total: null// 总共多少条
      },
      currentPage: 1, // 当前页
      tagsStatusType: baseApi.status, // 枚举状态
      tagsDailogShow: false, // 弹框状态
      tagsDetail: null, // 当前标签的详情
      subjectID: this.$route.query.subjectID, // 从学科管理页面传进来的id
      subjectName: this.$route.query.subjectName

    }
  },
  computed: {
  },
  created () {
    this.getLabelList()
  },
  methods: {
    async btnSousuo () {
      // 点击搜索
      // 发现问题如果渲染列表时分页不是第一页那么搜索请求过来的数据混乱
      // 解决办法让page.page是第一页
      // 发现新问题如果点击完搜索再点击分页就会触发原始渲染列表 就不管搜索了
      // 解决办法让原始渲染列表也带上driFrom
      this.page.page = 1
      this.getLabelList()
    },
    btnQingchu () {
      // 点击清楚
      this.dirForm = {
        tagName: '',
        state: null
      }
    },
    btnNameShow (row) {
      // 不能在computed计算属性里写
      // 判断给值
      if (row.state === 0) {
        // 禁用按钮应该显示启用 状态为true取反为false显示
        return '启用'
      } else if (row.state === 1) {
        // 启用 按钮应该显示禁用
        this.tagsBtnState = false
        return '禁用'
      }
      return '未知'
    },
    state (row) {
      // console.log(row)
      // 枚举状态
      // 利用find 循环便利看看有没有和状态一样的 有就返回这个对象
      const data = this.tagsStatusType.find(item => item.id === row.state.toString())
      return data ? data.value : '未知'
    },
    async getLabelList () {
      // 获取标签列表
      try {
        const { data } = await list({ ...this.page, ...this.dirForm, subjectID: this.subjectID })
        this.page.total = data.counts
        this.tagsList = data.items
      } catch (e) {
        console.log(e)
      }
    },
    handleSizeChange (pagesize) {
      // 每页显示多少个 改变时会触发 参数：每页条数
      this.page.pagesize = pagesize
      this.getLabelList()
    },
    handleCurrentChange (newPage) {
      // 当前第几页 改变时会触发 参数：当前页
      this.page.page = newPage
      this.getLabelList()
    },
    async btnStateChange (row) {
      // 状态改变事件
      try {
        // 参数是一个对象 数据id 状态state 可以直接传入让后台挑选
        const data = {
          id: row.id,
          state: row.state
        }
        // console.log(data)
        if (row.state === 0) {
          data.state = 1
        } else if (row.state === 1) {
          data.state = 0
        }
        // console.log(data)
        await changeState(data)
        this.$message.success('操作成功')
        this.getLabelList()
      } catch (err) {
        console.log(err)
      }
    },
    async btnEdit (row) {
      // 点击修改按钮触发事件
      // 弹出框显示
      // 获取本条列表详情详情
      // console.log(row);
      await this.$refs.tagsAdd.changeState(row)
      this.tagsDailogShow = true
    },
    async btnDel (row) {
      // 标签删除
      try {
        // 弹出提示框
        await this.$confirm('确定删除吗？')
        // 调用接口
        await remove(row)
        // 更新视图
        this.getLabelList()
        // 提示成功
        this.$message.success('删除成功')
      } catch (e) {
        console.log(e)
      }
    },
    btnAdd () {
      // 标签添加
      this.tagsDailogShow = true
    },
    btnGosub () {
      // 返回学科管理 删除传过来的id
      this.$router.push({
        path: 'list',
        name: 'subjects-list'
      })
      // 不管是返回学科还是去其他页面都要将学科id变为null
      this.subjectID = null
    }

  }
}
</script>

<style scoped lang='scss'></style>
